<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title></title>

    <link rel="stylesheet" href="/statics/plugins/mui/css/mui.min.css">
    <style>
        html, body {
            padding: 0;
            margin: 0;
            border: none 0;
        }

        html, body, iframe {
            height: 100%;
            width: 100%;
            border: none;
        }

        .mui-plus .plus {
            display: inline;
        }

        .plus {
            display: none;
        }

        #topPopover {
            position: fixed;
            top: 16px;
            right: 6px;
        }

        #topPopover .mui-popover-arrow {
            left: auto;
            right: 6px;
        }

        p {
            text-indent: 22px;
        }

        span.mui-icon {
            font-size: 14px;
            color: #007aff;
            margin-left: -15px;
            padding-right: 10px;
        }

        .mui-popover {
            #if($backupInterfaces.size() < 5)
                #set($height = ${backupInterfaces.size()} * 50 + 7)
                min-height: ${height}px;
            #else
                min-height: 220px;
            #end
            width: 100px;
        }
        .selected{
            color: #007aff;
        }

        .mui-content {
            padding: 10px;
        }
        iframe{
            margin-top: 44px;
            height: calc(100% - 44px);
            width : 100%;
        }
    </style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    #if($backupInterfaces.size() > 0)
    <a id="menu" class="mui-action-menu mui-icon mui-icon-bars mui-pull-right" href="#topPopover"></a>
    #end
    <h1 class="mui-title">${title}</h1>
</header>
<!--<div class="mui-content">-->
<iframe frameborder="0"
        scrolling="no"
        allowfullscreen="true"
        webkitallowfullscreen="true"
        mozallowfullscreen="true"
        url="${url}"
        interfaceUrl="${interfaceUrl}"
        src="${interfaceUrl}${url}"></iframe>
<!--</div>-->

<!--右上角弹出菜单-->
<div id="topPopover" class="mui-popover">
    <div class="mui-popover-arrow"></div>
    <div class="mui-scroll-wrapper">
        <div class="mui-scroll">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell switch selected" url="${interfaceUrl}"><a href="#">主线路</a></li>
                #foreach($backupInterface in ${backupInterfaces})
                <li class="mui-table-view-cell switch" url="$backupInterface.url"><a href="#">$backupInterface.label</a></li>
                #end
            </ul>
        </div>
    </div>

</div>
<script src="/statics/libs/jquery.min.js"></script>
<script src="/statics/libs/vue.min.js"></script>
<script src="/statics/plugins/mui/mui.min.js"></script>
<!--src="http://api.iy11.cn/apiget.php?url=${url}"></iframe>-->
<script>
    //    alert("当前的地址 = " + $("iframe").attr("src"))

    mui.init();
    mui.plusReady(function () {
        var _switch = false;
        $(".switch").on("click", function(){
            var that = $(this);
            if(that.hasClass("selected")){
                return;
            }
            $(".switch").removeClass("selected");
            that.addClass("selected");
            var iframe = $("iframe");
            iframe.attr("src", that.attr("url") + iframe.attr("url"));
            _switch = true;
            mui.toast("正在切换...")
        });
        $(".flush").on("click", function(){
            plus.webview.currentWebview().reload();
        });
        mui.back = function(){
            plus.webview.currentWebview().close();
        };
        $("iframe").load(function(){
            if(_switch){
                setTimeout(function(){
                    mui.toast("切换成功!");
                },500)
            }
        })

    });
    mui('.mui-scroll-wrapper').scroll();
    mui('body').on('shown', '.mui-popover', function (e) {
        //console.log('shown', e.detail.id);//detail为当前popover元素
    });
    mui('body').on('hidden', '.mui-popover', function (e) {
        //console.log('hidden', e.detail.id);//detail为当前popover元素
    });
</script>
</body>
</html>
